<template>
  <div style="min-height:40rem">
      <div class="shopimg">
          <img :src="shopdesc.imgurl" alt="">
      </div>
      <div class="details">
          <h3>{{shopdesc.sdec}}</h3>
          <p>￥{{shopdesc.price}}</p>
      </div>
      <div class="shopmsg">
          <ul>
              <li style="color:#999999" >运输:<div><span>上海</span></div></li>
              <li>运费:<div><span>￥20.00</span></div></li>
              <li>数量: <div><button @click="count--" :disabled='count==1'>-</button><span>{{count}}</span><button @click="count++" >+</button></div></li>
          </ul>
      </div>
      <div style="height:5rem"></div>
      <div class="bottombar">
              <ul  class="bottombarleft">
                  <li>收藏</li>
                  <li>购物车</li>
                  <li>客服</li>
              </ul>
              <ul class="bottombarright">
                  <li class="cart" @click="addCart()">加入购物车</li>
                  <li class="buy" @click="addCartJump()">立即购买</li>
              </ul>
      </div>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
export default {
    
    mounted(){
        if(!this.$route.params.data){
            this.shopdesc=this.$store.state.shopdetails
        }
       else this.shopdesc=this.$route.params.data
       this.$store.commit('saveshopdetails',this.shopdesc)
        // console.log(this.shopdesc)
    },
data(){
    return{
        count:1,
        shopdesc:{},
        
    }
},
methods:{
    addCart(){ 
        //判断是否登陆 是的话才进行下面操作
        if(this.$store.state.iflogin==true){
                let i=this.checkifagain;
        // console.log(i())
        //如果有重复得那么数组长度大于0；那么就更改count不执行下面得push操作
       if(i()!==undefined){
        //    console.log(99999)
           //传一个对象obj={count:,index:}
          let obj={count:this.count,index:i()};
        //   console.log(obj)
        this.$store.commit('changecount',obj);
       }
       else{
        let item={};
        item.count=this.count;
        item.shopdesc=this.shopdesc.sdec;
        item.price=this.shopdesc.price
        item.imgurl=this.shopdesc.imgurl
        // console.log(item)
        // this.$store.state.shopcart
        this.$store.commit('additem',item)
        // console.log(this.$store.state.shopcart)
   
       }
      Toast({
  message: '加入购物车成功',
});
        }//判断未登陆的行为
   else this.$router.push('/login')
    },
    addCartJump(){
          if(this.$store.state.iflogin==true){
               //跟上面原理一样
        let i=this.checkifagain;
        // console.log(i())
        //如果有重复得那么数组长度大于0；那么就更改count不执行下面得push操作
       if(i()!==undefined){
        //    console.log(99999)
           //传一个对象obj={count:,index:}
          let obj={count:this.count,index:i()};
        //   console.log(obj)
        this.$store.commit('changecount',obj);
       }
       else{
        let item={};
        item.count=this.count;
        item.shopdesc=this.shopdesc.sdec;
        item.price=this.shopdesc.price
        item.imgurl=this.shopdesc.imgurl
        // console.log(item)
        // this.$store.state.shopcart
        this.$store.commit('additem',item)
        // console.log(this.$store.state.shopcart)
       }
       this.$router.push('/shopcart')
          }
      else this.$router.push('/login')
    },
    checkifagain(){
        //返回的是i
        var i;
        this.$store.state.shopcart.map((val,index)=>{
            //  暂时没有商品编号 用价格代替 遍历购物车 发现里面如果有重复价格 即重复得商品
            // 那么就更改他此时得count而不是push进去
             if(val.price==this.shopdesc.price){
                 i=index
             }
         })
        return i
         
    }
}
}
</script>

<style lang="scss" scoped>
.cart{
    color:#fff;
    background-color: rgb(228, 137, 19);
}
.buy{
    background-color: red;
    color:#fff
}
.bottombar{
    z-index: 9999;
    position:fixed;
    border: 1px solid #dddddd;
    width: 100%;
    height:3rem;
    bottom: 0;
    display:flex;
    background-color: #fff;
    box-sizing: border-box;
    padding: 5px;
    left: 0;
    li{
        text-align: center;
        line-height: 7vh;
    }
    .bottombarright{
        overflow: hidden;
        width: 55%;
        height:100%;
        display: flex;
        justify-content: space-around;
        font-size:.7em;
        font-weight:700;
        margin-top:0;
        align-items: center;
        padding-left: 0;
        li{
            padding:10px;
            width: 50%;

        }
    }
    .bottombarleft{
        margin-top: 0;
        font-size: .3em;
        padding-left: 2vh;
        width: 45%;
        height:100%;
        display: flex;
        align-items: center;
        li{
            padding:10px
        }
        
    }
}
ul{
    list-style-type: none;
    li{
        padding: 13px;
        div{
            display: inline;
            margin:0 20px;
            button{
                margin:0 5px 0 0
            }
        }
    }
}
.shopimg{
    width: 100%;
    height:23rem;
    img{
        width: 100%;
        height:100%
    }
}
.details{
    padding:10px;
    p{
        font-size: 1em;
        color:red;
        font-weight: 700;
    }
}
</style>